<template>
  <div>
    <el-button @click="showDialog">新增</el-button>
    <el-table :data="modelValue" style="width: 100%">
      <el-table-column prop="index" label="序号" width="180" type="index" align="center" />
      <el-table-column prop="name" label="名称" align="center">
        <template #default="{row}">
          {{ row.name || '-' }}

        </template>
      </el-table-column>
      <el-table-column prop="area" label="建筑面积(㎡)" align="center">
        <template #default="{row}">
          {{ row.area ? `${row.area} 平方米` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="location" label="位置" align="center" show-overflow-tooltip />
      <el-table-column prop="careServices" label="提供的照护服务" align="center">
        <template #default="{row}">
          <div v-if="row.careServices && row.careServices.length > 0">
            <el-tag
                v-for="service in row.careServices"
                :key="service"
                style="margin-right: 5px; margin-bottom: 5px">
              {{ getServiceLabel(service) }}
            </el-tag>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="otherServices" label="其他服务" align="center" show-overflow-tooltip />
      <el-table-column label="操作" align="center" width="200">
        <template #default="{row, $index}">
          <el-button size="small" @click="handleEdit($index)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑记录' : '新增记录'">
      <el-form :model="formData" label-width="160px">
        <el-form-item label="名称" required>
          <el-input v-model="formData.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="建筑面积(㎡)" required>
          <el-input-number
              v-model="formData.area"
              :min="0"
              :precision="2"
              controls-position="right"
              style="width: 100%"
              placeholder="请输入建筑面积" />
        </el-form-item>
        <el-form-item label="地图选点" required>
          <el-input v-model="formData.location" placeholder="点击选择位置" @click="selectLocation" />
        </el-form-item>
        <el-form-item label="提供的照护服务">
          <el-checkbox-group v-model="formData.careServices">
            <el-checkbox v-for="service in careServiceOptions"
                         :key="service.value"
                         :label="service.label" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="其他服务">
          <el-input
              v-model="formData.otherServices"
              type="textarea"
              :rows="3"
              placeholder="请输入其他服务内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, watch } from "vue";
import { Form } from "ant-design-vue";

const formItemContext = Form.useInjectFormItemContext();
const emits = defineEmits(["update:modelValue", "change", "blur"]);
const careServiceOptions = [
  { label: '基本生活需求：看护、喂饭、换尿布', value: 'basic_care' },
  { label: '教育活动：绘画、手工等', value: 'educational_activities' },
  { label: '其他', value: 'other_services' }
];
const getServiceLabel = (value: string) => {
  const option = careServiceOptions.find(opt => opt.value === value);
  return option ? option.label : value;
};
const props = defineProps({
  componentSchema: {
    default: () => ({}),
    type: Object,
  },
  modelValue: {
    default: () => ([]),
    type: Array,
  },
});


const dialogVisible = ref(false);
const isEdit = ref(false);
const currentIndex = ref(-1);

const formData = ref({
  name: '',
  area: null,
  location: '',
  careServices: [],
  otherServices: ''
});

const showDialog = () => {
  isEdit.value = false;
  formData.value = {
    name: '',
    area: null,
    location: '',
    careServices: [],
    otherServices: ''
  };
  dialogVisible.value = true;
};

const handleEdit = (index) => {
  isEdit.value = true;
  currentIndex.value = index;
  formData.value = { ...props.modelValue[index] };
  dialogVisible.value = true;
};

const handleDelete = (index) => {
  const newData = [...props.modelValue];
  newData.splice(index, 1);
  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
};
const handleConfirm = () => {
  if (!formData.value.name || formData.value.area === null || !formData.value.location) {
    ElMessage.error('请填写名称、建筑面积和位置');
    return;
  }

  const newData = [...props.modelValue];

  if (isEdit.value) {
    newData[currentIndex.value] = formData.value;
  } else {
    newData.push(formData.value);
  }

  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
  dialogVisible.value = false;
};

const selectLocation = () => {
  // 这里实现地图选点逻辑
  // 示例：模拟选择位置
  formData.value.location = "北京市朝阳区XXX街道";
};

// 保留原有的 watch 逻辑
const value = ref("");
watch(value, (e) => {
  emits("update:modelValue", e);
  formItemContext.onFieldChange();
});

watch(
    () => props.modelValue,
    (e) => {
      if (e && e.length > 0) {
        value.value = e;
      }
    },
    { immediate: true }
);
</script>

<style scoped>
.el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
